$(function () {
  
  // 为formdata中的参数定义值  且默认值为已发布
  let state = '已发布'
  // 点击草稿则state的值为草稿
  $('.btn_cg').on('click', function () {
    state='草稿'
  })
  //点击发布则state的值是'已发布'  这个值是由接口决定的
  $('.btn_pub').on('click', function () {
    state = '已发布'
  })


  // 定义校验规则
  layui.form.verify(
   { title1:[/^.{1,30}$/,'1-30位字符串']}
  )



  function initCateList() {
    // 发送请求获取文章列表数据
    axios.get('/my/cate/list').then(({data:res}) => {
      // console.log(res)
      // 判断请求是否成功
      if (res.code == 0) {
        // 定义空数组接收遍历之后的数据
        let rows = []
        // 遍历data这个请求回来的数据数组
        res.data.forEach((item) => {
          // 为空数组添加数据
          rows.push(`
            <option value="${item.id}">${item.cate_name}</option>
          `)
        })
        // 为列表渲染数据
        $('[name="cate_id"]').append(rows)
        // 禁止layui对select的美化
        $('.ql-toolbar select').attr('lay-ignore','')
        // layui渲染动态表格
        layui.form.render('select')
        // 隐藏下拉列表
        $('.ql-toolbar select').hide()

      }
    })
  }


  initCateList()



 // 模拟点击事件  点击'选择图片按钮'触发点击$('#file)
 $('.btn-choose-img').on('click', function () {
  $('#file').click()
})


// 定义空变量接收选择的文件以便全局使用
let file = null
// 事件监听   监听点击$('#file)后的操作
$('#file').on('change', function (e) {
  // 事件对象参数获取真正的事件源
  let files = e.target.files
  // console.dir($('#file')[0]==e.target)
  // 判断是否选择了图片 如果为0 就是没有选择图片则结束函数
  if (files.length === 0) {
    file = null
    return
  }
  file = files[0]
  // URL里的函数URL.createObjectURL(files[0])获取文件中的url地址
  let imgURL = URL.createObjectURL(files[0])
  // 为图片替换新的src地址
  $('#image').attr('src',imgURL)
})




  
  // 发布
  $('.form-pub').on('submit', function (e) {
    //阻止表单的默认行为
    e.preventDefault()
    // console.log(123)
    // 如果!file是true则输出'请先选择封面'
    if (!file) {
      return layer.msg('请先选择封面')
    }

    // formdata函数中必须使用append添加内容
    let fd = new FormData()
    fd.append('title',$('[name="title"]').val())
    fd.append('cate_id',$('[name="cate_id"]').val())
    fd.append('cover_img',file)
    fd.append('content', quill.root.innerHTML)
    fd.append('state', state)

    console.log(quill.root.innerHTML)
    
    //发送请求
    axios.post('/my/article/add', fd).then(({ data: res }) => {
      // 判断请求是否成功
      if (res.code == 0) {
        layer.msg('发布成功')
        //跳转界面
        location.href = '/article/art_list.html'
        window.parent.hl('文章列表')
      }
    })
  })


  


})